<!--
 * @Author: linZeJian
 * @Date: 2022-08-25 15:34:32
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-09-01 14:07:48
 * @Description:
-->
<template>
  <div v-if="column.display">
    <van-field
      clickable
      :name="column.prop"
      input-align="right"
      right-icon="arrow"
      v-model="currentValue"
      :label="column.label"
      :placeholder="column.placeholder ? column.placeholder : '请选择' + column.label "
      :disabled="column.disabled"
      :required="column.required"
      :style="column.readonly || column.disabled || column.detail? 'pointer-events: none;': ''"
      :rules="[{ required: column.required }]"
      @click="show = true"
      readonly
    />
    <van-popup
      v-model:show="show"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-field clickable v-model.trim="keyvalue" left-icon="search" placeholder="搜索" @input="search"></van-field>
      <van-picker
        show-toolbar
        :columns="filterList"
        @cancel="show = false"
        @confirm="onConfirm"
        value-key="label"
      />
    </van-popup>
  </div>
</template>

<script>
  import mixEvent from './mixins/mixEvent';
export default {
  name: "avant-picker",
  props: ['column','modelValue'],
  inject: ['getViewFormData'],
  mixins: [mixEvent],
  data() {
    return {
      show: false,
      // 搜索框的关键字
      keyvalue: "",
      // 过滤数组
     // filterList: [],
      comValueTextObj: {},
    };
  },
  mounted(){
    if( this.getViewFormData){
      this.formData = this.getViewFormData()
    }
  },

  computed: {
    currentValue () {
      return   this.comValueTextObj[this.modelValue]
    },
    filterList(){
      return this.search();
    }
  },


  created() {
    this.search();
  },
  methods: {
    // 输入框搜索方法
    search() {

      var labelProps = this.column.props?this.column.props["label"]||"label":"label";
      var valueProps = this.column.props?this.column.props["value"]||"value":"value";

      if(!this.column.dicData){
        return [];
      }

      this.column.dicData.forEach((item) => {
        item.text = item[labelProps];
        item.value = item[valueProps];
        this.comValueTextObj[item[valueProps]] = item[labelProps];
        // this.comValueTextObj[item.value] = item.label;
      });

      // 对过滤数组进行操作，返回符合条件的数组
      var filterList = this.column.dicData.filter((params) => {
        return this.keyvalue=="" ||params.text.includes(this.keyvalue);
      });
      return filterList;
    },
    onConfirm(data) {
      //debugger
      var myValue = data.selectedValues[0];
      this.$emit('update:modelValue', myValue);
      if (this.formData) {
        this.formData[this.column.prop] = myValue;
      }
      this.bindCalculatorEvent(this.column,myValue);
      this.show = false;

    },
  },
};
</script>

<style></style>
